<template>
  <div class="position">
    <CompanyNavBar title="在招职位" :showArrow="true" @leftClick="leftClick">
      <template #left>
        <van-icon name="down" style="transform: rotate(90deg)" />
      </template>
    </CompanyNavBar>
    <van-tabs
      v-model="active"
      line-width="0"
      line-height="0"
      title-inactive-color="#545671"
      title-active-color="#fff"
    >
      <van-tab>
        <template #title>
          <span class="active_type">全部</span>
        </template>
        <!-- 内容 {{ index }} -->
      </van-tab>
      <van-tab v-for="(item, index) in listType.types" :key="index">
        <template #title>
          <span class="active_type">{{ item }}</span>
        </template>
        <!-- 内容 {{ index }} -->
      </van-tab>
    </van-tabs>
    <!-- 城市经验待遇筛选 -->
    <van-dropdown-menu>
      <van-dropdown-item title="城市" ref="item">
        <van-cell-group>
          <van-cell title="单元格">
            <template #right-icon>
              √
            </template>
          </van-cell>
          <van-cell title="单元格" />
          <van-cell title="单元格" />
        </van-cell-group>
      </van-dropdown-item>
      <van-dropdown-item
        v-model="dropDown.value1"
        :options="dropDown.option1"
      />
      <van-dropdown-item
        v-model="dropDown.value2"
        :options="dropDown.option2"
      />
    </van-dropdown-menu>
    <div class="list">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list
          v-if="bol"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="getData"
        >
          <div
            class="item"
            v-for="item in positionList"
            :key="item.id"
            @click="positionDetail(item)"
          >
            <div class="header">
              <h3>{{ item.name }}</h3>
              <div class="price">{{ item.salary }}</div>
            </div>
            <div class="tags">
              <span class="tag">{{ item.city }}</span>
              <span class="tag">{{ item.experience }}</span>
              <span class="tag">{{ item.education }}</span>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <PositionDetail ref="positionDetail" :itemList="itemList"></PositionDetail>
  </div>
</template>

<script>
import PositionDetail from './positionDetail.vue'
import { companiesIdPositions } from '@/api/company.js'
import { mapActions, mapState } from 'vuex'
export default {
  name: 'CompanyPosition',
  components: {
    PositionDetail
  },
  data () {
    return {
      bol: true,
      itemList: {},
      isLoading: false,
      loading: false,
      finished: false,
      dropDown: {
        value1: 0,
        value2: 'a',
        option1: [
          { text: '经验', value: 0 },
          { text: '经验', value: 1 },
          { text: '待遇', value: 2 }
        ],
        option2: [
          { text: '待遇', value: 'a' },
          { text: '好评排序', value: 'b' },
          { text: '销量排序', value: 'c' }
        ]
      },
      active: 0,
      positionList: [],
      total: 0,
      form: {
        id: 0,
        limit: 5,
        start: 0,
        city: null,
        salary: null,
        experience: null,
        type: null
      },
      listType: [],
      initForm: {}
    }
  },
  async created () {
    this.initForm = JSON.parse(JSON.stringify(this.form))
    // 获取职位类别
    this.getSelectData()
  },
  computed: {
    ...mapState('positionInfo', ['positionInfoType', 'positionInfo'])
  },
  methods: {
    ...mapActions('positionInfo', ['getPositionInfoType']),
    async getSelectData () {
      // 调用接口获取职业筛选类型
      await this.getPositionInfoType(Number(this.$route.query.id))
      this.listType = this.positionInfoType
      // console.log('this.listType: ', this.listType)
    },
    leftClick () {
      this.$router.push(this.$route.query.oldurl)
    },
    // 获取职位信息
    async getData () {
      this.form.id = Number(this.$route.query.id)
      const res = await companiesIdPositions(this.form)
      this.loading = false
      // console.log('res职位: ', res)
      this.positionList.push(...res.data.list)
      this.total = res.data.total
      if (this.total > this.positionList.length) {
        this.form.start += this.form.limit
      } else {
        this.finished = true
      }
    },
    // 下拉刷新
    async onRefresh () {
      this.loading = false
      this.finished = false
      this.form = JSON.parse(JSON.stringify(this.initForm))
      this.positionList = []
      // await this.getData()
      this.isLoading = false
    },
    // 跳转岗位详情
    positionDetail (item) {
      this.itemList = item
      this.$refs.positionDetail.isShow = true
    }
  }
}
</script>

<style lang="less" scoped>
.van-tab {
  .active_type {
    padding: 10px 20px;
    background: #f7f4f5;
    border-radius: 32px;
  }
}
.van-tab--active {
  .active_type {
    background: #00b8d4;
  }
}
.list {
  .item {
    padding: 40px 30px;
    text-align: center;
    border-bottom: 2px solid #f7f4f5;
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      h3 {
        height: 50px;
        font-family: PingFangSC-Semibold;
        font-size: 36px;
        color: #19232b;
        letter-spacing: 0;
        font-weight: 600;
      }
      .price {
        height: 45px;
        font-family: PingFangSC-Regular;
        font-size: 32px;
        color: #e40137;
        letter-spacing: 0.37px;
        text-align: right;
        font-weight: 400;
      }
    }
    .tags {
      margin-top: 20px;
      display: flex;
      justify-content: start;
      align-items: center;
      .tag {
        padding: 10px;
        background: #f7f4f5;
        border-radius: 6px;
        margin-right: 26px;
        font-family: PingFangSC-Regular;
        font-size: 24px;
        color: #b4b4bd;
        letter-spacing: 0.28px;
        font-weight: 400;
      }
    }
  }
}
</style>
